<template>
<div>
  <!-- 背景图 -->
  <div class="bac_title">
    <!-- 头像 -->
    <div class="head">
      <img :src="icon.dfk" alt="">
    </div>
    <p class="name">{{medata.nickname}}</p>
  </div>
  <!-- 内容 -->
  <div class="w">
    <!-- 我的订单 -->
     <div class="">
       <div class="me_title">
         <span>我的订单</span>
         <!---href="order#/order?id=all"-->
         <a href="#/order?id=all">全部订单 <img :src="icon.more" alt=""></a>
       </div>
       <div>
        <van-tabbar   active-color="#000000" inactive-color="#0000000" route>
          <van-tabbar-item badge="" to="/order?id=0">
            <span>待付款 </span>
            <template #icon="props">
              <img :src="icon.dfk " />
            </template>
          </van-tabbar-item>
          <van-tabbar-item badge="" to="/order?id=1">
            <span>待发货</span>
            <template #icon="props">
              <img :src="icon.dfh" />
            </template>
          </van-tabbar-item>
          <van-tabbar-item badge="" to="/order?id=2">
            <span>待收货</span>
            <template #icon="props">
              <img :src="icon.dsh" />
            </template>
          </van-tabbar-item>
      <!-- /evaluate -->
          <van-tabbar-item badge="" to="/order?id=3">
            <span>已完成</span>
            <template #icon="props">
              <img :src="icon.dpj "/>
            </template>
          </van-tabbar-item>
          <van-tabbar-item badge="" to="/order?id=4">
            <span>已取消</span>
            <template #icon="props">
              <img :src="icon.ywc "/>
            </template>
          </van-tabbar-item>
        </van-tabbar>
    
       </div>

     </div>
     <!-- 我的服务 -->
     <div>
      <div class="me_title">
        <span>我的服务</span>
   
      </div>
      <div>
        <van-tabbar route   active-color="#000000" inactive-color="#000000" route>
          <van-tabbar-item badge="" to="/coll">
            <span>收藏 </span>
            <template #icon="props">
              <img :src="icon.sc" />
            </template>
          </van-tabbar-item>
          <van-tabbar-item badge="" to="/consigneelist">
            <span>地址</span>
            <template #icon="props">
              <img :src="icon.dz" />
            </template>
          </van-tabbar-item>
          <van-tabbar-item badge="" to="/cart">
            <span>客服</span>
            <template #icon="props">
              <img :src="icon.kf" />
            </template>
          </van-tabbar-item>
<!--           <van-tabbar-item badge="" to="/setup">
            <span>设置</span>
            <template #icon="props">
              <img :src="icon.sz "/>
            </template>
          </van-tabbar-item> -->
        </van-tabbar>
    
      </div>

     </div>

  </div>
</div>
</template>
<style lang="" scoped>
  .w .van-tabbar--fixed{
position: relative;
  }
  /* 背景图 */
  .bac_title{
    height: 4.74rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../../assets/img/index/banner.jpg") no-repeat ;
    background-size: 100% 100%;
  }
  .bac_title .head{
    width:1.2rem;
height:1.2rem;
border-radius:50%;
overflow: hidden;
  }
    .bac_title .head img{
      
      width: 100%;
    }
    .bac_title .name{
      margin-top: 0.17rem;
      font-size:0.3rem;
font-weight:bold;
color:rgba(255,255,255,1);
padding: 0 1rem 0;
    }
    /*我的订单 */
    .me_title{
      display: flex;
      justify-content: space-between;
      margin-top: 0.4rem;
      margin-bottom: 0.59rem;
      height:0.24rem;
  font-size:0.26rem;
  font-weight:400;
  color:rgba(51,51,51,1);
    }
     .me_title span{
      font-size:0.34rem;
font-weight:bold;
color:rgba(51,51,51,1);
     }
     .me_title a img{
       width: 0.13rem;
       height: 0.24rem;
     }

</style>
<script>
  import store from '@/store';
  import getData from '@/assets/js/axios.js';
export default{
  data () {
    return {
      baimg:{
        img:require("../../assets/img/index/banner.jpg")
      },
      medata:{},
      icon:{
          more:require("../../assets/img/me/more.png"),
          dfk:require("../../assets/img/me/dfk.png"),
          dfh:require("../../assets/img/me/dfh.png"),
          dsh:require("../../assets/img/me/dsh.png"),
          dpj:require("../../assets/img/me/dpj.png"),
          ywc:require("../../assets/img/me/ywc.png"),
          sc:require("../../assets/img/me/sc.png"),
          dz:require("../../assets/img/me/dz.png"),
          kf:require("../../assets/img/me/kf.png"),
          sz:require("../../assets/img/me/sz.png"),
         
        },
    }
  },
  mounted () {
    if (store.state.token) {
        //console.log(store.state.token, 123)
        //获取购物车内容
        getData.perIndex().then(req => {
          console.log(req,"登录信息")
          this.medata=req.data.data;
        }).catch(err => {
        })
      } else {
        this.$router.push("/login")
      };

    
  }
}

</script>